<template>
	<view class="check-stock-main-list-component">
		<view class="top-row">
			<view class="top-btns">
				<view class="search-btn" @tap.stop="onQuery"><u-icon name="search" size="30" /></view>
				<view class="reset-btn" @tap.stop="onReset">重 置</view>
			</view>
		</view>
		<scroll-view class="list-scroll-view" :scroll-y="true" @scrolltolower="onMoreList">
			<view class="list-items-around">
				<!-- ########### -->
				<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
					<view class="list-item-show" @tap.stop="onWatchDetail(item)">
						<view class="item-header">
							<view class="item-index">
								<uni-badge :text="index+1" type="primary" size="normal" />
							</view>
							<view class="item-title-box">
								<text>{{item.planNo}}</text>
							</view>
							<view class="item-tag">
								<u-tag v-if="item.statusEnum===1" :text="item.statusEnumName" size="mini" bg-color="#808080" color="#ffffff" border-color="#808080" />
								<u-tag v-else-if="item.statusEnum===2" :text="item.statusEnumName" size="mini" bg-color="#FEF3E6" color="#F18201" border-color="#F18201" />
								<u-tag v-else-if="item.statusEnum===3" :text="item.statusEnumName" size="mini" bg-color="#EFFCF2" color="#5CDF7D" border-color="#5CDF7D" />
								<u-tag v-else :text="item.statusEnumName" size="mini" bg-color="#ffc0cb" color="#ff0000" border-color="#ff0000" />
							</view>
						</view>
						<view class="item-container">
							<view class="item-desc">
								<view class="label">时间</view>
								<view class="content auto-wrap">{{item.startPlanTimeFormat}}~{{item.endPlanTimeFormat}}</view>
							</view>
							<view class="item-desc">
								<view class="label">仓库</view>
								<view class="content auto-wrap">{{item.areaName}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- ########### -->
			</view>
			<view class="no-more-text-row" v-if="!hasMore">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
import { parseDic } from '@/static/js/utils/index.js'
// import dayjs from 'dayjs'
const pagination = {
	PageNo:1,
	PageSize:10
}
export default {
	name:'checkStockMainListComponent',
	emits:['query','update:resetflag','action'],
	data(){
		return {
			hasMore:true,
			queried:{},
			list:[]
		}
	},
	methods:{
		onQuery(){
			this.$emit('query')
		},
		onReset(){
			this.resetQuery()
		},
		resetQuery(){
			this.$emit('update:resetflag',new Date().getTime())
		},
		newList(params=null,callback){
			this.queried = {...pagination}
			if (params) {
				this.queried = {...this.queried,...params}
			}
			this.getList(callback)
		},
		onMoreList(){
			if (this.hasMore) {
				this.queried.PageNo++;
				this.getList();
			}
		},
		getList(callback){
			this.$api.get('page',this.queried,{block:'checkStock'}).then((res)=>{
				let arr = (res.rows || []).map((obj)=>{
					obj.statusEnumName = parseDic(this.$store,'task_status',obj.statusEnum)
					obj.startPlanTimeFormat = obj.startPlanTime?dayjs(obj.startPlanTime).format('YYYY.MM.DD'):''
					obj.endPlanTimeFormat = obj.endPlanTime?dayjs(obj.endPlanTime).format('YYYY.MM.DD'):''
					return obj
				});
				let len = arr.length;
				if (this.queried.PageNo>=res.totalPage) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (this.queried.PageNo===1) {
					this.list = arr;
				} else {
					this.list = [...this.list,...arr];
				}
				callback && callback(true)
			}).catch(err=>{
				console.log(err)
				callback && callback(false)
			})
		},
		onWatchDetail(obj) {
			this.$emit('action',obj)
		}
	}
}
</script>

<style scoped lang="scss">
.check-stock-main-list-component{
	$topSize:90rpx;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-top: $topSize;
	.top-row{
		position: absolute;
		z-index: 5;
		top: 0;
		left: 0;
		height: $topSize;
		width: 100%;
		padding: 10rpx 12rpx;
		box-sizing: border-box;
		border-bottom:1px solid #F0F8FF;
		background-color: $uni-bg-color;
	}
	.top-btns{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 1px solid $uni-border-color;
		border-radius: 32rpx / 50%;
		display: flex;
		overflow: hidden;
		color: $uni-text-color-grey;
	}
	.search-btn,.reset-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.reset-btn{
		flex-shrink: 0;
		width: 160rpx;
		border-left: 1px solid $uni-border-color;
	}
	.search-btn{
		flex-grow: 1;
		background-color: #DCDCDC;
	}
	.list-scroll-view{
		height: 100%;
	}
	.list-items-around{
		padding-top:12rpx;
		.list-item {
			margin-bottom: 12rpx;
			border-width: 2rpx 0;
			border-style: solid;
			border-color: $uni-border-color;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.list-item-show {
		background-color: $uni-bg-color;
		font-size: 40rpx;
		.item-header{
			display: flex;
			border-bottom:2rpx solid $uni-border-color;
			padding: 6rpx 0;
			.item-index,.item-tag{
				flex-shrink: 0;
			}
			.item-index{
				width: 68rpx;
				padding-left: 10rpx;
				padding-top:11rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
			}
			.item-tag{
				display: flex;
				padding:6rpx 16rpx;
			}
			.item-title-box{
				flex-grow: 1;
				width: 1px;
				padding-left: 4rpx;
				display: flex;
				align-items: center;
			}
		}
		.item-container{
			padding: 0 16rpx;
			display: flex;
			flex-wrap: wrap;
			.item-desc{
				flex-shrink: 0;
				width: 100%;
				font-size: .9em;
				display: flex;
				align-items: flex-start;
				padding: 10rpx 0;
				border-bottom: 2rpx dashed $uni-border-color;
				&>.label {
					font-size: .9em;
					flex-shrink: 0;
					color:#989898;
					width: 100rpx;
				}
				&>.content{
					width: 1px;
					flex-grow: 1;
					line-height: 1.2em;
					padding: 0 4rpx;
				}
				&:last-child {
					border-bottom:0;
				}
			}
		}
	}
}
</style>